<template>
  <div class="routation-chart">
    <swiper
      class="swiper-container"
      :pagination="{ clickable: true }"
      :autoplay="{ delay: 1500, disableOnInteraction: false }"
      loop
    >
      <swiper-slide class="swiper-slide" v-for="it in datas" :key="it.ad_id">
        <img
          :src="'http://www.shxw114.com:9527/' + (it.ad_logo || it.ban_logo)"
        />
      </swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" id="swiper-pagination"></div>
    </swiper>
  </div>
</template>

<script setup>
import "swiper/swiper-bundle.css";
// 引入swiper核心和所需模块
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
// 在modules加入要使用的模块
import { RotationChartGet, ModBannerGet } from "../../server/index.js";
import { onMounted, ref, getCurrentInstance } from "vue";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);
const modules = [Navigation, Pagination, Scrollbar, A11y];
const datas = ref({});
onMounted(function () {
  const {
    attrs: { itemtype },
  } = getCurrentInstance();
  (async function () {
    const { data } = await (itemtype === "itmes2"
      ? ModBannerGet()
      : RotationChartGet());
    datas.value = data;
  })();
});
</script>
<style scoped>
.routation-chart {
  width: 100%;
  height: 6rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(
    -45deg,
    #cccc,
    #f7f7f7f7,
    rgba(188, 180, 180, 0.696),
    rgba(196, 191, 191, 0.63)
  );
  background-size: 600% 600%;
  animation: gradientBG 5s ease infinite;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-container .swiper-slide {
  width: 100%;
  height: 6rem;
}
.swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
}
</style>